<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
    <link rel="stylesheet" href="css/style.css">
    <script src = "js/jquery-3.5.1.js"></script>
</head>
<style>
    #info{
        background: url("pic/loge.jpeg");
        height: 120px;
    }
    h2{
        color: seashell;
        font-size: 80px;
        margin: 0;
        text-align: center;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        height: 10vh;
    }

    li {
        float: left;
    }

    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 25px 16px;
        text-decoration: none;
    }
    li a:hover {
        background-color: #111;
    }

    table{
        width: 100%;
        align-content: center;
    }
    th{
        align-content: center;
        font-size: 20px;
        font-weight: normal;
        color: #039;
        padding: 10px 8px;
        border-bottom: 2px solid #6678b1;
    }
    td{
        color: #669;
        padding: 9px 8px 0px 8px;
        font-weight: 400;
        font-size: 18px;
        text-align: center;
    }
    tr:hover td{
        color: #009;
    }
</style>
<script>
    $(function (){
        //1.页面加载时，数据自动加载
        $.post("/studentSystem/studentInfoServlet", function (data){
            var tbody = $("#data");
            for(let i in data){
                var tr = $("<tr></tr>");
                var id = $("<td></td>").text(data[i].id);
                var name = $("<td></td>").text(data[i].name);
                var gender = $("<td></td>").text(data[i].gender);
                var birth = $("<td></td>").text(data[i].birth);
                if(data[i].gender == "f"){
                    gender = $("<td></td>").text("女");
                }else{
                    gender = $("<td></td>").text("男");
                }
                tr.append(id,name,gender,birth);
                tbody.append(tr);
            }
        },"json")
    })

</script>
<body>
<nav><ul style="margin: 0;padding: 0;overflow: hidden;background-color: #333;height: 10vh;">
    <li><a href="index.jsp">学生信息管理系统</a></li>
    <li><a href="studentInfo.html">信息查看</a></li>
    <li> <a href="loggingCheck.html">登录</a></li>
    <li> <a href="enroll.html">添加</a></li>
</ul>
</nav>
<section id="info">
    <h2>学生信息查看</h2>
</section>
<table>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>出生日期</th>
    </tr>
    <tbody id="data">
    </tbody>
</table>



</body>
<script></script>
</html>